<template>
	<div class="study-progress-detail-page">
		<!-- 返回按钮 -->
		<div class="back-button">
			<el-button type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
		</div>

		<!-- 主体内容 -->
		<div class="progress-detail-wrapper">
			<!-- 左边课程封面 -->
			<div class="course-cover">
				<img :src="courseDetail.courseCoverImageUrl" alt="课程封面" class="cover-image" />
			</div>

			<!-- 右边课程信息 -->
			<div class="course-info">
				<h2 class="course-title">{{ courseDetail.title }}</h2>

				<!-- 进度条 -->
				<div class="progress-bar-wrapper">
					<div class="progress-label">学习进度：</div>
					<el-progress
						:percentage="courseDetail.progressPercent"
						:stroke-width="16"
						status="success"
						color="#409EFF"
						show-text
					/>
				</div>

				<!-- 其他信息 -->
				<ul class="info-list">
					<li><strong>学习时长：</strong>{{ courseDetail.userOverallProgress || '—' }}</li>
					<li><strong>总课时数：</strong>{{ courseDetail.courseOverallLength || '—' }}</li>
					<li><strong>课程ID：</strong>{{ courseDetail.courseId }}</li>
					<li><strong>用户ID：</strong>{{ courseDetail.userId }}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			courseDetail: {},
		};
	},
	methods: {
		goBack() {
			this.$router.back();
		},
		getCourseProgress() {
          const courseId = this.$route.query.courseId;

          if (!courseId) {
            this.$message.error('缺少课程ID');
            return;
          }

          this.$http
            .get('learningprogress/getByCourseId', {
              params: { courseId: Number(courseId) },
              headers: { Token: localStorage.getItem('frontToken') },
            })
            .then((res) => {
              if (res.data.code === 0 && res.data.data) {
                const data = res.data.data;
                data.progressPercent = data.courseOverallLength
                  ? Math.min(Math.round((data.userOverallProgress / data.courseOverallLength) * 100), 100)
                  : 0;
                this.courseDetail = data;
              } else {
                this.$message.error('获取课程进度失败');
              }
            })
            .catch(() => {
              this.$message.error('请求出错');
            });
        },

	},
	created() {
		this.getCourseProgress();
	},
};
</script>

<style scoped>
.study-progress-detail-page {
	padding: 30px;
	background-color: #f9f9f9;
}

.back-button {
	margin-bottom: 20px;
}

.progress-detail-wrapper {
	display: flex;
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.course-cover {
	width: 220px;
	margin-right: 30px;
}

.cover-image {
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.course-info {
	flex: 1;
}

.course-title {
	font-size: 22px;
	color: #333;
	margin-bottom: 24px;
	font-weight: bold;
}

.progress-bar-wrapper {
	margin-bottom: 24px;
}

.progress-label {
	margin-bottom: 8px;
	font-size: 14px;
	color: #666;
}

.info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.info-list li {
	margin-bottom: 10px;
	font-size: 14px;
	color: #444;
}
</style>
